<template>
    <div class="area-choose">
        <van-popup v-model="show" position="bottom" :lock-scroll="true">
            <van-area :area-list="areaList" @cancel="onchange" :columns-num="num" @confirm="onchange"/>
        </van-popup>
    </div>
</template>

<script>
    import {Area, Popup} from 'vant';
    import API from '../../request/api';

    export default {
        name: "area-choose-item",
        components: {Area, Popup},
        data() {
            return {
                show: false,
                areaList: {}
            };
        },
        props: {
            num: {
                type: String,
                default: ''
            }
        },
        computed: {},
        methods: {
            changeShow() {
                this.show = !this.show;
            },
            onchange(msg) {
                // console.log('msssg',msg)
                this.changeShow();
                let area = {
                    province: {
                        name: '',
                        id: ''
                    },
                    city: {
                        name: '',
                        id: ''
                    },
                    county: {
                        name: '',
                        id: ''
                    }

                };
                area.province.name = msg[0].name;
                area.province.id = msg[0].code;
                area.city.name = msg[1] === undefined ? '' : msg[1].name;
                area.city.id = msg[1] === undefined ? '' : msg[1].code;
                area.county.name = msg[2] === undefined ? '' : msg[2].name;
                area.county.id = msg[2] === undefined ? '' : msg[2].code;
                this.$emit('getArea', area);
            },
            cancel() {
                this.changeShow();
            }
        },
        mounted() {
            // 获取所有地址信息
            this.request.get(API.getAllArea).then((result) => {
                // console.log('resccc',result);
                this.areaList = result;
                // this.areaList.province_list = result.province
                // this.areaList.city_list = result.city
                // this.areaList.county_list = result.county
            });
        }
    };
</script>

<style scoped>

</style>